<template>
  <ul class="todo-main">
    <TodoItem
      class="todo-item"
      v-for="(todo, index) in todos"
      v-show="!todo.complete"
      :key="todo._id"
      :todo="todo"
      :index="index"
      :deleteTodo="deleteTodo"
      :updateTodo="updateTodo"
    />
  </ul>
</template>

<script>
import TodoItem from "./TodoItem.vue"
export default {
  props: {
    todos: Array,
    deleteTodo: Function,
    updateTodo: Function
  },
  components: { TodoItem }
}
</script>

<style lang="less" scoped>
.todo-item {
  background-color: rgba(255, 165, 2, 0.2);
}
</style>
